﻿@{
    Layout = null;
}

<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/style.css" rel="stylesheet" />
<script src="~/layuinew/layui.js"></script>
<link href="~/layuinew/css/layui.css" rel="stylesheet" />
<style>
    .info {
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 15px;
        margin-bottom: 20px;
        background-color: #f9f9f9;
    }

    .div-border {
        border: 1px solid #ccc; /* 1像素宽的实线边框，颜色为灰色 */
    }

    .section {
        margin-bottom: 15px;
    }

    .pic img {
        max-width: 100%;
        border-radius: 5px;
    }

    .title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .address {
        color: #666;
    }

    .label {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .ng-binding {
        margin-bottom: 5px;
    }

    .price-detail, .price-total {
        margin-top: 10px;
    }

    .price-total {
        font-size: 20px;
        font-weight: bold;
    }

    .protocol {
        margin-top: 10px;
        font-size: 14px;
    }

    .booking-details {
        font-family: Arial, sans-serif;
        margin: 20px;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .protocol input {
        margin-right: 5px;
    }

    #btnAddOrder {
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
    }

        #btnAddOrder:hover {
            background-color: #0056b3;
        }

</style>

<div class="main_wrapper sign-up-header">
    <div class="main_menu_wrapper header-color">
        <div class="main_menu_navbar" style="background-color:#ffff">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-4 col-lg-2 col-6">
                        <img src="~/images/锦江之星.jpg" />
                    </div>
                    <div class="col-xl-8 col-lg-10 d-none d-xs-none d-sm-none d-md-none d-lg-block d-xl-block">
                        <nav class="navbar navbar-expand-sm  d-block">
                            <ul class="navbar-nav ">
                                <li class="nav-item p-rel  wrap-nav-item">
                                    <a href="javascript:;" class="nav-link">
                                        酒店首页
                                    </a>
                                </li>
                                <li class="nav-item p-rel  wrap-nav-item">
                                    <a href="javascript:;" class="nav-link">
                                        酒店预订
                                    </a>
                                </li>
                                <li class="nav-item p-rel  wrap-nav-item">
                                    <a href="javascript:;" class="nav-link">
                                        企业商旅
                                    </a>
                                </li>
                                <li class="nav-item p-rel  wrap-nav-item">
                                    <a href="javascript:;" class="nav-link">
                                        积分商城
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="hs-blog-wrapper">
        <div class="container">
            <div class="row">
                @* 左半部分 *@
                <div class="col-xl-9 col-lg-8 col-md-12 col-sm-12 col-12">
                    <div class="hs-pricing-table page-content p-30">
                        @* 文本框 *@
                        <div class="row">
                            <div class="layui-container">
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend>预订信息</legend>
                                </fieldset>
                                <div style="display: flex; flex-wrap: wrap;">
                                    <div style="flex: 1; margin-right: 20px;">
                                        <label style="display: block;">入住日期:</label>
                                        <input type="text" disabled id="inDatepicker" class="form-input" data-timer="1722528000000">
                                    </div>
                                    <div style="flex: 1; margin-right: 20px;">
                                        <label style="display: block;">离店日期:</label>
                                        <input type="text" disabled id="outDatepicker" class="form-input" data-timer="1722614400000">
                                    </div>
                                    <div style="flex: 1; margin-right: 20px;">
                                        <label style="display: block;">房间数量:</label>
                                        <select id="selectValue" style="width: 100px;">
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="3">3</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div id="showOrder" style="margin-top:10px"></div>
                                </div>
                            </div>

                            <hr style="margin-top:50px" />

                            <div class="layui-container" style="margin-top:40px">
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend>入住信息</legend>
                                </fieldset>
                                <div class="layui-form layui-form-item" style="white-space: nowrap;">
                                    <label class="layui-form-label" style="display: inline-block; width: 80px;">联系人:</label>
                                    <div class="layui-input-inline" style="display: inline-block;">
                                        <input type="text" id="tenantName" class="layui-input" data-timer="1722528000000">
                                    </div>
                                    <label class="layui-form-label" style="display: inline-block; width: 80px; margin-left: 20px;">手机号码:</label>
                                    <div class="layui-input-inline" style="display: inline-block;">
                                        <input type="text" id="phoneNumber" class="layui-input" data-timer="1722614400000">
                                    </div>
                                    <label class="layui-form-label" style="display: inline-block; width: 80px; margin-left: 20px;">身份证:</label>
                                    <div class="layui-input-inline" style="display: inline-block;">
                                        <input type="text" id="outDatepicker" class="layui-input" data-timer="1722614400000">
                                    </div>
                                </div>
                            </div>

                            <hr style="margin-top:50px" />

                            <div class="layui-container" style="margin-top:40px">
                                <fieldset class="layui-elem-field layui-field-title">
                                    <legend>支付与优惠信息</legend>
                                </fieldset>
                                <div class="radio-box clearfix">
                                    <div class="radio-right">
                                        <div class="radio-row clearfix ng-scope" ng-repeat="payType in params.paymentTypes" ng-show="!payType.hide">
                                            <input type="radio" id="ONLINE_PREPAID" ng-click="changePaymentType(payType.value)" ng-checked="params.selPayType==payType.value" ng-disabled="" checked="checked">
                                            <label ng-class="{'payType-disabled': payType.disabled}" class="ng-binding">支付全部房费</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @* 右半部分 *@
                <div class="col-xl-3 col-lg-4 col-md-12 col-sm-12 col-12">
                    <div class="hs-slidebar sb-grid-main-wrapper p-0">
                        <div class="info">
                            <div class="section">
                                <div class="pic"><img src="http://imgs.bestwehotel.com/images/inn/1eomr2qxyS/320" alt="酒店图片" onerror="this.parentNode.removeChild(this)"></div>
                                <p>IU酒店（北京西站丽泽商务区六里桥东地铁站店）</p>
                                <p>西三环南路6号</p>
                            </div>
                            <div class="section">
                                <div class="label">入住房型</div>
                                <p><label id="roomName"></label> <span id="num"></span>间</p>
                                <div class="label">价格名称：</div>
                                <p><span id="productsName"></span></p>
                                <div class="label">入住日期：</div>
                                <p><span id="orderTime"></span> <span id="TimeDay"></span>晚</p>
                            </div>
                            <div class="section">
                                <div>总金额:￥<label id="money"></label> </div>
                                <button id="btnAddOrder">提交订单</button>
                                <div>
                                    <input type="checkbox" id="bookNotice" required="required">
                                    <span>已阅读并同意<a ng-click="readBookNotice()">《WeHotel酒店预订须知》</a></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@* 底部 *@
<div class="bottom-footer">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-md-12 col-sm-12 col-12">
                <p>© 2021-22 Webstrot | All Rights Reserved. Design by <a href="#"></a></p>
            </div>
        </div>
    </div>
</div>
@* <script src="~/first/bookingorderpage.js"></script> *@
<script>
    layui.use(['table', 'form', 'layer', 'laypage', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var table = layui.table;
        var laypage = layui.laypage;

        var newDiv = ""

        // 获取当前页面的 URL 参数
        const urlParams = new URLSearchParams(window.location.search);

        $("#inDatepicker").val(localStorage.getItem("startTime"))
        $("#outDatepicker").val(localStorage.getItem("endTime"))
        var list = JSON.parse(localStorage.getItem("orderRoomInfo"))
        $("#roomName").html(list.name)
        $("#productsName").html(list.productsname)
        console.log(list)

        $(document).ready(function () {
            // 监听下拉框变化事件
            $('#selectValue').change(function () {
                var selectedRooms = parseInt($(this).val());  // 获取用户选择的房间数量并转换为整数

                // 发送 POST 请求获取数据
                $.post({
                    url: 'http://localhost:5174/api/RoomHousingState/GetAllPriceDateTime',
                    contentType: "application/json",
                    headers: {
                        "Authorization": "Bearer " + localStorage.getItem('token')
                    },
                    async: true,
                    data: JSON.stringify({ roomId: list.id, startDate: localStorage.getItem("startTime"), endDate: localStorage.getItem("endTime") }),
                    success: function (res) {
                        // 清空订单显示容器
                        $("#showOrder").empty();

                        // 定义一个变量来存储总费用
                        var totalPrice = 0;

                        // 遍历返回的数据
                        res.data.forEach(function (item) {
                            // 创建一个 Date 对象
                            var date = new Date(item.addTime);
                            var month = date.getMonth() + 1; // 获取月份
                            var day = date.getDate(); // 获取日期
                            var formattedDate = `${month.toString().padStart(2, '0')}月${day}号`;

                            // 创建新的 div 元素
                            var newDiv = $('<div class="div-border" style="width: 140px;float:left;padding:5px">');

                            // 设置 div 内容
                            newDiv.append('<p>日期: ' + formattedDate + '</p>');
                            newDiv.append('<p>房间: ' + selectedRooms + '间</p>'); // 使用选择的房间数量
                            newDiv.append('<p>早餐: 无早餐 </p>');
                            newDiv.append('<p>总费用: ￥<span>' + (item.priceEveryDate * selectedRooms) + '</span></p>'); // 计算总费用

                            totalPrice += item.priceEveryDate * selectedRooms;

                            // 将新生成的 div 添加到容器中
                            $("#showOrder").append(newDiv);
                        });

                        $("#money").text(totalPrice);
                    },
                    error: function (err) {
                        console.error('Error fetching data: ', err);
                    }
                });

                $("#num").html(selectedRooms)
            });

            // 页面加载时触发一次下拉框的 change 事件，以便初始化显示订单
            $('#selectValue').trigger('change');
        });

        $("#orderTime").html(localStorage.getItem("startTime") + " - " + localStorage.getItem("endTime"))

        // 将日期字符串转换为 Date 对象
        var startTime = new Date(localStorage.getItem("startTime"));
        var endTime = new Date(localStorage.getItem("endTime"));

        // 计算两个日期之间的天数差
        var timeDiff = Math.abs(endTime.getTime() - startTime.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); // 1000毫秒 * 3600秒 * 24小时

        // 更新显示到 #TimeDay 元素中
        $("#TimeDay").html(diffDays);

        // 使用 document 或者已存在的父容器来绑定点击事件
        $(document).on('click', '#btnAddOrder', function (data) {
            var form = {
                tenantName: $("#tenantName").val(),
                phoneNumber: $("#phoneNumber").val(),
                orderNumber: parseInt($("#TimeDay").html()),
                liveTime: $("#inDatepicker").val(),
                leaveTime: $("#outDatepicker").val(),
                breakfastNum: 1,
                stayDays: $("#TimeDay").html(),
                roomId: list.id,
                customerInformation: 1,
                orderFrom: 1,
                orderNum: parseInt($("#TimeDay").html()),
                reservationMoney: parseInt($("#money").html()),
                shopComment: "欢迎来到锦江之星酒店",
                numberId: 0
            }

            console.log(form)


            $.ajax({
                url: 'http://localhost:5174/api/RoomType/AddRoomOrder',
                type: 'post',
                contentType: "application/json",
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                data: JSON.stringify(form),
                success: function (res) {
                    console.log(res.data)
                    // 添加成功后的操作
                    if (res.code > 0) {
                        layer.msg("添加成功");
                    }
                },
                error: function (error) {
                    console.error(error);
                }
            });
        });
    });
</script>